<template>
  <el-drawer
    :size="drawerWidth()"
    :headerStyle="headerStyle"
    :bodyStyle="bodyStyle"
    direction="rtl"
    :show-close="true"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <div slot="title">
      <img :src="noticeIcon" class="anticon" />
      <span class="flow-ant-drawer-title">
        <EditName v-model="node.name" />
      </span>
    </div>
    <div class="flow-setting-module">
      <el-tabs>
        <el-tab-pane key="1" label="通知设置">
          <div class="flow-setting-content">
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">节点名称</p>
              <el-input v-model="node.name" :size="size" class="w-full" placeholder="节点名称" />
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">通知类型</p>
              <el-checkbox-group v-model="noticeType">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(notice, i) in notices" :key="i">
                    <el-checkbox :label="notice.value" :key="notice.value">{{ notice.name }}</el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">发送通知人</p>
              <FlowNodeApproval :groups="node.props.approverGroups" :node="node" title="通知人" />
            </div>
            <div v-if="noticeType.includes(2)" class="flow-setting-item">
              <p class="flow-setting-item-title">外部手机号</p>
              <el-button type="link" icon="el-icon-plus" block>
                添加手机号
              </el-button>
            </div>
            <div v-if="noticeType.includes(3)" class="flow-setting-item">
              <p class="flow-setting-item-title">外部邮箱账号</p>
              <el-button type="link" icon="el-icon-plus" block>
                添加邮箱
              </el-button>
            </div>
            <div v-if="noticeType.includes(3)" class="flow-setting-item">
              <el-checkbox-group v-model="emailExt">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, i) in emailItems" :key="i">
                    <el-checkbox  :label="item.value" :key="item.value">{{ item.name }}</el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
            <div v-if="noticeType.includes(3) && emailExt.includes(1)" class="flow-setting-item">
              <p class="flow-setting-item-title">抄送人</p>
              <FlowNodeApproval :groups="node.props.approverGroups" :node="node" title="抄送人" />
            </div>
            <div v-if="noticeType.includes(3) && emailExt.includes(2)" class="flow-setting-item">
              <p class="flow-setting-item-title">密送人</p>
              <FlowNodeApproval :groups="node.props.approverGroups" :node="node" title="密送人" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="2" label="内容设置">
          <div class="flow-setting-content">
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">选择已审核模板</p>
              <div class="tpl-flex-box">
                <el-button type="link" icon="plus-circle">
                  创建新模板
                </el-button>
              </div>
              <el-select :size="size" style="width: 100%;margin-bottom: 20px;" placeholder="请选择模板"></el-select>
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">主题</p>
              <el-input v-model="noticeTitle" :size="size" :rows="4" placeholder="主题" />
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">通知内容</p>
              <el-input type="textarea" v-model="noticeContext" :size="size" :rows="4" placeholder="通知内容" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="3" label="高级设置"></el-tab-pane>
      </el-tabs>
    </div>
    <FlowDrawerFooter @close="onClose" />
  </el-drawer>
</template>
<script>
  import { flowMixin } from '../../mixins/flowMixin';
  import EditName from '../../common/EditName.vue';
  import FlowNodeApproval from '../Approver/Approval.vue';
  import FlowDrawerFooter from '../../common/DrawerFooter.vue';
  export default {
    name: 'FlowNoticeSetting',
    mixins: [flowMixin],
    components: { EditName, FlowNodeApproval, FlowDrawerFooter },
    data() {
      return {
        node: {},
        visible: false,
        headerStyle: {
          'background-color': '#498ff2',
          'border-radius': '0px 0px 0 0',
        },
        noticeContext: '',
        noticeTitle: '',
        noticeType: [],
        // 邮件选择项
        emailExt: [],
        notices: [
          {
            name: '站内通信',
            value: 1,
          },
          {
            name: '短信通知',
            value: 2,
          },
          {
            name: '邮件通知',
            value: 3,
          },
          {
            name: '钉钉通知',
            value: 4,
          },
          {
            name: '企业微信',
            value: 5,
          },
          {
            name: 'WeLink',
            value: 6,
          },
        ],
        emailItems: [
          {
            name: '添加抄送',
            value: 1,
          },
          {
            name: '添加密送',
            value: 2,
          },
        ],
      };
    },
    methods: {
      afterVisibleChange(val) {
        console.log('visible', val);
      },
      showDrawer(node) {
        this.visible = true;
        this.node = node;
      },
      onClose() {
        this.visible = false;
        this.$emit('close');
      },
    },
  };
</script>
